<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>房屋拍照应用</title>
    <link rel="stylesheet" href="./css/app.css">
</head>
<body>
    <main class="app-container">
        <!-- 顶部状态栏 -->
        <header class="app-header">
            <div class="header-content">
                <div class="app-title">
                    <span class="app-icon">🏠</span>
                    <span class="app-name">房屋拍照助手</span>
                </div>
                <div class="header-stats">
                    <div class="stat-badge">
                        <span class="stat-icon">📸</span>
                        <span class="stat-text" id="header-photo-count">0</span>
                    </div>
                </div>
                <div class="current-group">
                    <span class="group-icon">📍</span>
                    <span class="group-text" id="demo">房屋拍照</span>
                </div>
            </div>
        </header>

        <!-- 主内容区 -->
        <section class="app-content" id="app-content">
            <!-- 拍照功能区域 -->
            <div id="capture-section">
                <div class="camera-container">
                    <!-- 拍照预览中心 -->
                    <div class="preview-center">
                        <div class="preview-area" id="preview-container">
                            <div class="preview-placeholder" id="preview-placeholder">
                                <div class="camera-icon">📷</div>
                                <div class="placeholder-text">点击下方按钮开始拍照</div>
                                <div class="placeholder-tip">💡 拍照提示: 请确保光线充足</div>
                            </div>
                            <div class="preview-image-wrapper" style="display: none;">
                                <img id="preview-image" src="" alt="预览图片" />
                            </div>
                        </div>
                    </div>

                    <!-- 操作按钮区 -->
                    <div class="action-buttons">
                        <button class="action-btn primary-btn" onclick="captureImage()" id="capture-btn">
                            <span class="btn-icon">📷</span>
                            <span class="btn-text">拍照</span>
                        </button>
                        <button class="action-btn secondary-btn" onclick="retakePhoto()" id="retake-btn" style="display: none;">
                            <span class="btn-icon">🔄</span>
                            <span class="btn-text">重拍</span>
                        </button>
                        <button class="action-btn success-btn" onclick="savePhoto()" id="save-btn" style="display: none;">
                            <span class="btn-icon">✅</span>
                            <span class="btn-text">保存</span>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 分组功能区域 -->
            <div id="classify-section" style="display:none;">
                <div class="classify-container">
                    <div class="classify-header">
                        <h3>📁 照片分组管理</h3>
                        <p>设置照片保存的分组目录</p>
                    </div>
                    <button class="main_button" onclick="classify()" id="classify-btn">
                        <span class="btn-icon">🗂️</span>
                        <span class="btn-text">选择分组</span>
                    </button>
                </div>
            </div>

            <!-- 照片管理区域 -->
            <div id="gallery-section" style="display:none;">
                <div class="gallery-container">
                    <!-- 照片管理头部 -->
                    <div class="gallery-header">
                        <h3>📸 照片管理</h3>
                        <!-- <div class="gallery-stats">
                            <span class="stat-badge">共 <span id="total-photos">0</span> 张照片</span>
                        </div> -->
                        <button class="main_button" id="export-all-btn" onclick="exportAllPhotosToPublicDir()" style="margin-left:16px;">
                            
                            <span class="btn-text">批量导出</span>
                        </button>
                        <button class="main_button" id="export-zip-btn" onclick="exportAllGroupsAsZip()" style="margin-left:8px;">
                            <span class="btn-text">导出压缩包</span>
                        </button>
                        <button class="main_button" id="share-selected-btn" onclick="shareSelectedPhotos()" style="margin-left:8px;">
                            
                            <span class="btn-text">分享选中</span>
                        </button>
                    </div>

                    <!-- 分组筛选 -->
                    <div class="filter-bar">
                        <select id="group-filter" onchange="filterPhotos()">
                            <option value="all">所有分组</option>
                            <option value="客厅">客厅</option>
                            <option value="卧室">卧室</option>
                            <option value="厨房">厨房</option>
                            <option value="卫生间">卫生间</option>
                        </select>
                        <button class="refresh-btn" onclick="refreshGallery()">
                            <span class="btn-icon">🔄</span>
                        </button>
                    </div>

                    <!-- 照片网格 -->
                    <div class="photo-grid" id="photo-grid">
                        <!-- 照片项会动态加载 -->
                        <div class="empty-state" id="empty-state">
                            <div class="empty-icon">📸</div>
                            <div class="empty-text">暂无照片</div>
                            <div class="empty-tip">快去拍照吧！</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 统计信息区域 -->
            <div id="stats-section" style="display:none;">
                <div class="stats-container">
                    <!-- 统计页面头部 -->
                    <div class="stats-header">
                        <h3>📊 数据统计</h3>
                        <button class="refresh-btn" onclick="refreshStats()">
                            <span class="btn-icon">🔄</span>
                        </button>
                    </div>

                    <!-- 统计卡片网格 -->
                    <div class="stats-grid">
                        <!-- 概览卡片 -->
                        <div class="stat-card overview-card">
                            <div class="card-header">
                                <span class="card-icon">📈</span>
                                <span class="card-title">概览</span>
                            </div>
                            <div class="card-content">
                                <div class="stat-row">
                                    <span class="stat-label">总照片</span>
                                    <span class="stat-value" id="stats-total-photos">0</span>
                                </div>
                                <div class="stat-row">
                                    <span class="stat-label">分组数</span>
                                    <span class="stat-value" id="stats-group-count">0</span>
                                </div>
                            </div>
                        </div>

                        <!-- 时间卡片 -->
                        <div class="stat-card time-card">
                            <div class="card-header">
                                <span class="card-icon">📅</span>
                                <span class="card-title">时间统计</span>
                            </div>
                            <div class="card-content">
                                <div class="stat-row">
                                    <span class="stat-label">今日</span>
                                    <span class="stat-value" id="stats-today">0</span>
                                </div>
                                <div class="stat-row">
                                    <span class="stat-label">本周</span>
                                    <span class="stat-value" id="stats-week">0</span>
                                </div>
                                <div class="stat-row">
                                    <span class="stat-label">本月</span>
                                    <span class="stat-value" id="stats-month">0</span>
                                </div>
                            </div>
                        </div>

                        <!-- 趋势卡片 -->
                        <div class="stat-card trend-card">
                            <div class="card-header">
                                <span class="card-icon">📈</span>
                                <span class="card-title">最近7天</span>
                            </div>
                            <div class="card-content">
                                <div class="trend-chart" id="trend-chart">
                                    <!-- 趋势图会动态生成 -->
                                </div>
                            </div>
                        </div>

                        <!-- 排行卡片 -->
                        <div class="stat-card ranking-card">
                            <div class="card-header">
                                <span class="card-icon">🏆</span>
                                <span class="card-title">分组排行</span>
                            </div>
                            <div class="card-content">
                                <div class="ranking-list" id="ranking-list">
                                    <!-- 排行榜会动态生成 -->
                                </div>
                            </div>
                        </div>

                        <!-- 分组分布卡片 -->
                        <div class="stat-card distribution-card">
                            <div class="card-header">
                                <span class="card-icon">📁</span>
                                <span class="card-title">分组分布</span>
                            </div>
                            <div class="card-content">
                                <div class="distribution-list" id="distribution-list">
                                    <!-- 分组分布会动态生成 -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 底部导航栏 -->
        <nav class="app-tabbar">
            <button class="tabbar-btn" id="tab-capture" onclick="switchTab('capture')">
                <span class="tab-icon">📷</span>
                <span class="tab-text">拍照</span>
            </button>
            <button class="tabbar-btn" id="tab-gallery" onclick="switchTab('gallery')">
                <span class="tab-icon">🖼️</span>
                <span class="tab-text">相册</span>
            </button>
            <button class="tabbar-btn" id="tab-classify" onclick="switchTab('classify')">
                <span class="tab-icon">🗂️</span>
                <span class="tab-text">分组</span>
            </button>
            <button class="tabbar-btn" id="tab-stats" onclick="switchTab('stats')">
                <span class="tab-icon">📊</span>
                <span class="tab-text">统计</span>
            </button>
        </nav>
    </main>

    <!-- 照片预览模态框 -->
    <div class="modal-overlay" id="photo-modal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h4>照片预览</h4>
                <button class="close-btn" onclick="closePhotoModal()">×</button>
            </div>
            <div class="modal-body">
                <img id="modal-photo" src="" alt="预览照片" />
                <div class="photo-info">
                    <div class="info-item">
                        <span class="info-label">文件名:</span>
                        <span id="modal-filename">-</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">拍摄时间:</span>
                        <span id="modal-time">-</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">分组:</span>
                        <span id="modal-group">-</span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="modal-btn delete-btn" onclick="deletePhoto()">
                    <span class="btn-icon">🗑️</span>
                    <span class="btn-text">删除</span>
                </button>
                <button class="modal-btn share-btn" onclick="sharePhoto()">
                    
                    <span class="btn-text">分享</span>
                </button>
            </div>
        </div>
    </div>
    
    <!-- 脚本文件 -->
    <script type="text/javascript" src="./js/main.js"></script>
    <script type="text/javascript" src="./js/capture.js"></script>
    <script type="text/javascript" src="./js/classify.js"></script>
    <script type="text/javascript" src="./js/gallery.js"></script>
    <script type="text/javascript" src="./js/stats.js"></script>
    <script type="text/javascript" src="./js/share.js"></script>
</body>
</html>
